<template>
  <div class="wscn-http404-container">
    <div>
      <p> 数据在一万以下一百以上 只显示10个剩下的靠搜索 后端分页</p>
      <el-select v-model="value" filterable  :filter-method="userFilter" placeholder="请选择">
        <el-option 
          v-for="item in dataList" 
          :key="item.value" 
          :label="item.label"
          :value="item.value"
          >
        </el-option>
      </el-select>
     </div>
    <div style="padding-top:30px">
            <p> 数据在一万以上 数据太多 我们就让前端搜索 后端分页 </p>
            <el-select v-model="value" filterable  :filter-method="userTwoFilter" placeholder="请选择">
              <el-option 
                v-for="item in dataArrList" 
                :key="item.value" 
                :label="item.label"
                :value="item.value"
                >
              </el-option>
            </el-select>
     </div>
     <div style="padding-top:30px"> 数据在一百以下 直接赋值就可以了  </div>

  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京5"
        },
         {
          value: "选项6",
          label: "北京6"
        },
        {
          value: "选项7",
          label: "北京7"
        },
        {
          value: "选项8",
          label: "北京8"
        },
         {
          value: "选项9",
          label: "北京9"
        },
         {
          value: "选项10",
          label: "北京10"
        },
         {
          value: "选项11",
          label: "北京11"
        },
         {
          value: "选项12",
          label: "北京12"
        },
         {
          value: "选项13",
          label: "北京13"
        },
         {
          value: "选项14",
          label: "北京14"
        },
         {
          value: "选项15",
          label: "北京15"
        },
         {
          value: "选项16",
          label: "ddddd"
        },
        {
          value: "选项17",
          label: "ddddd"
        }
      ],
      dataTwoList:[ {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京5"
        },
         {
          value: "选项6",
          label: "北京6"
        },
        {
          value: "选项7",
          label: "北京7"
        },
        {
          value: "选项8",
          label: "北京8"
        },
         {
          value: "选项9",
          label: "北京9"
        },
         {
          value: "选项10",
          label: "北京10"
        },
         {
          value: "选项11",
          label: "北京11"
        },
         {
          value: "选项12",
          label: "北京12"
        },
         {
          value: "选项13",
          label: "北京13"
        },
         {
          value: "选项14",
          label: "北京14"
        },
         {
          value: "选项15",
          label: "北京15"
        },
         {
          value: "选项16",
          label: "ddddd"
        },
        {
          value: "选项17",
          label: "dddssssdd"
        },
        {
          value: "选项18",
          label: "ddddd"
        }],
      dataList:[],
      dataArrList:[],
      value: ""
    };
  },
  created(){
       this.dataList = this.options.slice(0, 10)
  },
  methods: {
      userFilter(query = '') {
          console.log(query)
        let arr = this.options.filter((item) => {
          return item.label.includes(query) 
        })
        if (arr.length > 10) {
          this.dataList = arr.slice(0, 10)
        } else {
          this.dataList = arr
        }

      },
      userTwoFilter(query = '') {
          console.log(query)
          let arr = this.dataTwoList.filter((item) => {
            return item.label.includes(query) 
          })
          if (arr.length > 10) {
            this.dataArrList = arr.slice(0, 10)
          } else {
            this.dataArrList = arr
          }
      },
      
  }
};
</script>


<style lang="scss" scoped>
.wscn-http404-container {
  padding: 30px;
}
</style>
